@import "flex.css";
@import "footer.css";

:root
{
    --color-nande:  rgb(213,132,50);
    --color-itemax: rgb(38,106,174);
    --color-zapp:   rgb(195,84,237);

    --color-blanco: #ffffff;
    --color-grisoscuro: #535353;
}

body
{
    margin: 0;
    overflow-x: hidden;
}

#header
{
    position: fixed;
    top: 0;
    width: 100%;
    background-image: linear-gradient(to bottom, var(--color-blanco), var(--color-blanco));
    z-index: 1;
    height: 5%;
}

#m2,#m3
{
    margin-left: -4%;
}

#seccion1
{
    min-height: max-content;
    margin-top: 8%;
}

#seccion2
{
    background-image: linear-gradient(var(--color-grisoscuro),var(--color-blanco),var(--color-nande),var(--color-blanco),var(--color-grisoscuro));
}

#seccion3
{
    background-image: linear-gradient(var(--color-grisoscuro),var(--color-blanco),var(--color-nande),var(--color-blanco),var(--color-grisoscuro));
    padding-bottom: 2rem;
}


.menu
{
    width: 18%;
    margin: 1rem 0.21rem;
}
.menu:hover
{
    cursor: pointer;
}
#headerLogo
{
    width: 25rem;
}

.botonheader
{
    width: 70%;
    align-items: center;
    justify-content: center;
}

.logo
{
    width: 100%;
    transition: 0.3s;
}

.titulo
{
    width: 100%;
}

.logo-container
{
    width: 100%;
    padding:0;
}


#subtitulo1
{
    background-color: var(--color-nande);
}
#subtitulo2
{
    background-color: var(--color-itemax);
}
#subtitulo3
{
    background-color: var(--color-zapp);
}

h1,h2,h3,h4,h5,h6,p,label,li,a
{
    font-family: 'Poppins';
}

.white
{
    color: white;
}

h1,h2,h3,h4,h5
{
    margin: 0.2rem;
}

p
{
    margin: 0;
}

a
{
    text-decoration: none;
    text-align: center;
}



#fb
{
    font-size: 2em;
    margin-right: 0.2rem;
    color: grey
}
#fb:hover
{
    color: blue;
}
#ig
{
    font-size: 2em;
    margin-right: 0.5rem;
    color: grey
}
#ig:hover
{
    color: violet;
}
#phone
{
    font-size: 2em;
    margin-left: 2rem;
}


.subtitulo
{
    text-align: center;
    width: 100%;
    border-bottom: 2px solid grey;
    border-left: 2px solid grey;
    border-right: 2px solid grey;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
#titulo1
{
    color: var(--color-nande);
}
#titulo2
{

    color: var(--color-itemax);
}
#titulo3
{
    color: var(--color-zapp);
}


#consulta
{
    background-image: url('../img/Fondo-gestiona.png');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
}
#consulta-sub
{
    text-align: center;
    padding: 1em;
    height: 100%;
}
.enter
{
    text-align: center;
    background-image: linear-gradient(to bottom, var(--color-blanco), var(--color-grisoscuro));
    border: 2px solid var(--color-nande);
    border-radius: 8px;
    margin: 1em;
    width: 100%;
    height: 100%;
    color: var(--color-nande);
}
button:hover
{
    cursor: pointer
}

#tituloGrilla
{
    margin-top: 3.5em;
    width: 80%;
    text-align: center;
    background-color: var(--color-grisoscuro);
    border: 2px solid var(--color-nande);
    border-radius: 8px;
}
#tGrilla
{
    width: 100%;
    color: var(--color-nande);
}
#subtituloGrilla
{
    margin-top: 2em;
    margin-bottom: 2em;
    width: 70%;
    text-align: center;
}
#stGrilla
{
    width: 100%;
}

#grillaContainer
{
    margin-top: 0.5rem;
    margin-bottom: 2rem;
    width: 90%;
    height: 40rem;
}

#seccion3
{
    padding: 0;
    background-image: linear-gradient(160deg, var(--color-grisoscuro) 70%, rgba(195,84,237,0.8) 100%);
}
#imagenContainer
{
    width: 100%;
    z-index: 0;
}
#imagenZapp
{
    background-image: url(../img/FONDOZAPP.png);
    background-size: cover;
    width: 100%;
}
#pcZapp
{
    width: 15%;
}
#tabZapp
{
    width: 10%;
}
#phoneZapp
{
    width: 5%;
    margin: 0;
    /* transform: translateX(-10px); */
}

.contactos
{
    color: grey;
    margin-right: 30em;
    padding: 1em
}



@media (max-width: 1124px) {
    .menu
    {
        width:25%
    }
    .br
    {
        display: none;
    }
}

@media (max-width: 1236px) {
    .contactos
    {
        margin-right: 0;
    }

    #consulta
    {
        align-items: center;
        justify-content: center;
    }
    
}

@media (max-width: 910px) {
    .menu
    {
        width:32%
    }
}

@media (max-width: 630px) {
    #tituloGrilla
    {
        width: 90%;
    }
    #subtituloGrilla
    {
        width: 85%;
    }
}

@media (max-width: 460px) {

    #headphones
    {
        display: none;
    }
    #f1
    {
        padding-left: 0.5em;
    }
    #f2
    {
        padding-right: 0.5em;
    }
}

@media (max-width: 416px) {
    #phoneZapp
    {
        width:10%;
        transform: translateX(0);
    }

    #rs,#ac,#hide,#tabZapp,#pcZapp
    {
        display: none;
    }

    #headerLogo
    {
        width: 20em;
    }
}